<template>
  <div class="table-page-search-wrapper">
    <a-form layout="inline" @keyup.enter.native="searchQuery">
      <a-row :gutter="24" type="flex">
        <a-col class="col" :xxl="6" :xl="6" :lg="8" :md="8" :sm="24">
          <a-form-item label="订单类型">
            <j-multi-select-tag
              v-model="queryParam.orderType"
              placeholder="请选择订单类型"
              dictCode="oms_order_type"
              :maxTagCount="2"
              :maxTagTextLength="5"
            />
          </a-form-item>
        </a-col>
        <a-col class="col" :xxl="6" :xl="6" :lg="8" :md="8" :sm="24">
          <a-form-item label="订单来源">
            <j-multi-select-tag
              v-model="queryParam.orderSource"
              placeholder="请选择订单来源"
              dictCode="oms_order_source"
            />
          </a-form-item>
        </a-col>
        <a-col class="col" :xxl="6" :xl="6" :lg="8" :md="8" :sm="24">
          <a-form-item label="备注">
            <a-input v-model="queryParam.remark" placeholder="请输入备注关键词"></a-input>
          </a-form-item>
        </a-col>
        <template v-if="toggleSearchStatus">
          <a-col class="col" :xxl="6" :xl="6" :lg="8" :md="8" :sm="24">
            <!-- 订单号 -->
            <a-form-item>
              <span slot="label">
                <a-select
                  v-model="orderObjActived"
                  label-in-value
                  style="width: 90px"
                  @change="selectChange('orderInfoData')"
                >
                  <a-select-option
                    v-for="(item, index) in orderInfoData"
                    :key="index"
                    :value="item.key"
                    :title="item.label"
                  >
                    {{ item.label }}
                  </a-select-option>
                </a-select>
              </span>
              <a-input v-if="orderObjActived.key === 'orderId'" v-model="queryParam.orderId" placeholder="请输入单号,多单号需用英文逗号隔开"></a-input> 
              <a-input
                v-else
                :placeholder="`请输入${orderObjActived.label}`"
                v-model="queryParam[orderObjActived.key]"
                :maxLength="50"
                auto-size
              ></a-input>
            </a-form-item>
          </a-col>
          <!-- 发货仓 -->
          <a-col class="col" :xxl="6" :xl="6" :lg="8" :md="8" :sm="24">
            <a-form-item>
              <span slot="label">
                <a-select
                  v-model="shipmentsObjActived"
                  label-in-value
                  style="width: 123px"
                  @change="selectChange('shipmentsData')"
                >
                  <a-select-option
                    v-for="(item2, index) in shipmentsData"
                    :key="index"
                    :value="item2.key"
                    :title="item2.label"
                  >
                    {{ item2.label }}
                  </a-select-option>
                </a-select>
              </span>
              <a-input
                v-if="shipmentsObjActived.value === 'trackNumber'"
                v-model="queryParam.trackNumber"
                placeholder="请输入跟踪号,多单号需用英文逗号隔开"
                auto-size
              ></a-input>
              <a-input
                v-else
                v-model="queryParam[shipmentsObjActived.key]"
                :placeholder="`请输入${shipmentsObjActived.label}`"
                :maxLength="50"
                auto-size
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col class="col" :xxl="6" :xl="6" :lg="8" :md="8" :sm="24">
            <!-- 买家信息 -->
            <a-form-item>
              <span slot="label">
                <a-select
                  v-model="purchaserObjActived"
                  label-in-value
                  style="width: 100%"
                  @change="selectChange('purchaserData')"
                >
                  <a-select-option
                    v-for="(item2, index) in purchaserData"
                    :key="index"
                    :value="item2.key"
                    :title="item2.label"
                  >
                    {{ item2.label }}
                  </a-select-option>
                </a-select>
              </span>
              <a-input
                v-model="queryParam[purchaserObjActived.key]"
                :placeholder="`请输入${purchaserObjActived.label}`"
                :maxLength="50"
                auto-size
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col class="col" :xxl="6" :xl="6" :lg="8" :md="8" :sm="24">
            <a-form-item>
              <span slot="label">
                <a-select v-model="dateTime" style="width: 100%" @change="dateTimeSelectChange">
                  <a-select-option v-for="(item, index) in dateTimeData" :key="index" :value="item.key">
                    {{ item.label }}
                  </a-select-option>
                </a-select>
              </span>
              <a-range-picker
                v-model="dateTimeRange"
                valueFormat="YYYY-MM-DD HH:mm:ss"
                format="YYYY-MM-DD HH:mm:ss"
                show-time
                @change="dateTimeChange"
              ></a-range-picker>
            </a-form-item>
          </a-col>
          <a-col class="col" :xxl="6" :xl="6" :lg="8" :md="8" :sm="24">
            <a-form-item label="店铺名称">
              <a-select
                v-model="queryParam.storeNameArr"
                mode="multiple"
                placeholder="请输入选择店铺"
                show-search
                :maxTagCount="2"
                :filter-option="false"
                :not-found-content="null"
                @search="searchStoreNameHandle"
              >
                <a-select-option v-for="(store, index) in storeByNameData" :key="index" :value="store.id">
                  {{ store.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col class="col" :xxl="6" :xl="6" :lg="8" :md="8" :sm="24">
            <a-form-item label="订单信息变更">
              <j-dict-select-tag
                v-model="queryParam.orderChange"
                dictCode="oms_order_change"
                placeholder="请选择订单信息变更"
              />
            </a-form-item>
          </a-col>
          <a-col class="col" :xxl="6" :xl="6" :lg="8" :md="8" :sm="24">
            <a-form-item label="发货方式">
              <j-dict-select-tag
                v-model="queryParam.deliveryWay"
                dictCode="oms_order_delivery_way"
                placeholder="请选择发货方式"
              />
            </a-form-item>
          </a-col>
          <a-col class="col" :xxl="6" :xl="6" :lg="8" :md="8" :sm="24">
            <a-form-item label="最晚发货">
              <j-date
                v-model="queryParam.latestShipDate"
                placeholder="请选择最晚发货时间"
                dateFormat="YYYY-MM-DD HH:mm:ss"
                :showTime="true"
                style="width: 100%"
              ></j-date>
            </a-form-item>
          </a-col>
        </template>
        <a-col class="col" :xxl="6" :xl="6" :lg="8" :md="8" :sm="24">
          <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
            <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
            <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            <a @click="handleToggleSearch" style="margin-left: 8px">
              {{ toggleSearchStatus ? '收起' : '展开' }}
              <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
            </a>
          </span>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>
<script>
import jsonData from './AmzOrder.js'
import { getAction } from '@/api/manage'
import { simpleDebounce } from '@/utils/util'
export default {
  name: 'superQuery', //查询条件区域
  data() {
    return {
      queryParam: {},
      orderObjActived: { key: 'orderId', label: '订单号' }, //默认订单号
      orderInfoData: jsonData.orderInfoData, //订单信息
      shipmentsObjActived: { key: 'deliveryWarehouse', label: '发货仓' },
      shipmentsData: jsonData.shipmentsData, //发货信息
      purchaserObjActived: { key: 'buyerName', label: '买家名称' },
      purchaserData: jsonData.purchaserData, //买家
      dateTimeRange: [], //日期
      dateTimeData: jsonData.dateTimeData,
      dateTime: 'purchaseDate',
      /* 查询折叠 */
      toggleSearchStatus: false,
      storeByNameData: [],
      url: {
        queryStoreByName: '/oms/store/storeAuthAmazon/queryStoreByName',
      },
    }
  },
  methods: {
    handleToggleSearch() {
      this.toggleSearchStatus = !this.toggleSearchStatus
    },
    //查询
    searchQuery() {
      this.$emit('searchQueryOk', this.queryParam)
    },
    //重置
    searchReset() {
      this.queryParam = {}
      this.dateTimeRange = []
      this.$emit('searchResetOk', this.queryParam)
    },
    getParam() {
      let { storeNameArr, ...queryParam } = this.queryParam
      queryParam.storeName = this.queryParam.storeNameArr ? this.queryParam.storeNameArr.join(',') : ''
      return queryParam || null
    },
    //选择下拉组件
    selectChange(type) {
      jsonData[type].forEach((item) => {
        this.$set(this.queryParam, [item.key], null)
      })
    },
    //切换日期下拉选择项
    dateTimeSelectChange(value) {
      jsonData['dateTimeData'].forEach((item) => {
        this.$set(this.queryParam, [`${item.key}_begin`], null)
        this.$set(this.queryParam, [`${item.key}_end`], null)
      })
      this.dateTimeRange = []
    },
    //日期范围查询
    dateTimeChange(value, dateString) {
      this.queryParam[`${this.dateTime}_begin`] = dateString[0]
      this.queryParam[`${this.dateTime}_end`] = dateString[1]
    },
    //搜索店铺
    searchStoreNameHandle: simpleDebounce(function (value) {
      if (value) {
        getAction(this.url.queryStoreByName, { storeName: value }).then((res) => {
          if (res.success) {
            this.storeByNameData = res.result || []
          } else {
            this.$message.warning(res.message)
          }
        })
      } else {
        this.storeByNameData = []
      }
    }, 500),
  },
}
</script>
<style lang="less" scoped>
@media (max-width: 1074px) {
  .col {
    width: 100% !important;
  }
}

@media (min-width: 1075px) and (max-width: 1450px) {
  .col {
    width: 49% !important;
  }
}

@media (min-width: 1450px) and (max-width: 1835px) {
  .col {
    width: 33.3% !important;
  }
}
/deep/.ant-input {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

</style>